<template>
	<nav-bar></nav-bar>
	<view :style="{paddingTop: $store.state.navBarHeight+'px'}">
		<swiper class="home-banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="banner in banners" :key="banner.id">
				<image :src="banner.picUrl" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<!-- 宫格导航 -->
		<uni-grid :column="4" class="grid-container">
			<uni-grid-item v-for="cate in cates" :key="cate.id">
				<view class="item" @tap="enterList(cate.id)">
					<image :src="cate.icon" mode="scaleToFill"></image>
					<text>{{cate.name}}</text>
				</view>
				
			</uni-grid-item>
	
		</uni-grid>
		<!-- /宫格导航 -->
		<!-- 推荐商品列表 -->
		 <view class="items">
			 <view class="item" v-for="item in items" :key="item.id" @tap="enterDetail(item.id)">
				 <image :src="item.pic" mode="scaleToFill"></image>
				 <view class="item-info">
					 <text class="name">{{item.name}}</text>
					 <view class="action">
						 <text class="price">{{item.minPrice}}</text>
						 <uni-icons type="plus-filled" color="#f66" size="30"></uni-icons>
					 </view>
				 </view>
			 </view>
			 <view class="loading-text">
				 {{finished?'--我也是有底线的--': '加载中...'}}
			 </view>
		 </view>
		<!-- /推荐商品列表 -->
	</view>
	<view class="refresh" @tap="refresh" v-show="showFresh">点击刷新</view>
</template>

<script>
	export default {
		data() {
			return {
				banners: [],
				cates: [],
				items: [],
				page: 1,
				pageSize: 5,
				reachBottomLoading: false,
				// 是否没有数据
				finished: false,
				showFresh: false
			}
		},
		methods: {
			enterList(id){
				// 跳转到列表页
				uni.navigateTo({
					url: "/pages/list/list?cateId="+id
				})
			},
			enterDetail(id){
				uni.navigateTo({
					url: "/pages/detail/detail?id="+id
				})
			},
			refresh(){
				// 自动刷新
				uni.startPullDownRefresh()
			},
			getBanners(){
				this.$request('/banner/list').then(res => {
					if(res.code === 0) {
						this.banners = res.data
					}
				})
			},
			getCates(){
				this.$request('/shop/goods/category/all').then(res => {
					if (res.code === 0) {
						this.cates = res.data
					}
				})
			},
			getItems(){
				this.reachBottomLoading = true;
				this.$request('/shop/goods/list/v2', {
					method: 'POST',
					data: {
						page: this.page,
						pageSize: this.pageSize
					}
				}).then(res => {
					uni.stopPullDownRefresh();
					this.reachBottomLoading = false;
					if (res.code === 0) {
						this.items = [
							...this.items,
							...res.data.result
						]
					}
					if (res.code === 700) {
						this.finished = true;
					}
				})
			}
		},
		onLoad(){
			this.getBanners()
			this.getCates()
			this.getItems()
			
		},
		onReachBottom(){
			// 判断不是加载中
			if (!this.reachBottomLoading && !this.finished) {
				this.page++;
				this.getItems();
			}
		},
		onPullDownRefresh(){
			// 上拉加载时  需要下拉刷新
			this.page = 1;
			this.items = [];
			this.finished = false;
			this.getItems()
		},
		onPageScroll({scrollTop}){
			if (scrollTop > 300) {
				this.showFresh = true;
			} else {
				this.showFresh = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
.home-banner{
	width: 750rpx;
	height: 375rpx;
	image{
		width: 750rpx;
		height: 375rpx;
	}
}
.grid-container{
	.item{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		image{
			width: 100rpx;
			height: 100rpx;
		}
		text{
			font-size: 12px;
			color:  #333;
		}
	}
}
.items{ 
	.item{
		display: flex;
		align-items: center;
		image{
			width: 180rpx;
			height:180rpx;
		}
		.item-info{
			flex: 1;
			font-size: 12px;
		}
	}
}
.loading-text{
	line-height: 36px;
	text-align: center;
	color: #333;
	font-size: 12px;
}
.refresh{
	position: fixed;
	background-color: #fff;
	right: 50px;
	bottom: 50px;
	z-index: 100;
}
</style>
